<template>
    <div>
        <el-dialog type="primary" :visible.sync="dialoge6" width="50%" append-to-body>
            <el-form ref="form" :model="form" inline>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item prop="productName" label="测试项目">
                                <el-select v-model="form.fTestProject" placeholder="请选择" :disabled="form.check==1">
                                    <el-option v-for="(item, index) in testProject" :key="index" :label="item.name"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item prop="productName" label="选择期待LAB值">
                                <div @click="openLab()" class="el-input-div">{{
            form.bcmClientPreset ? form.bcmClientPreset.fClientPresetName : '请选择期待Lab值方案'
        }}</div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-light">
                            <el-form-item prop="productName" label="上传标准图片">
                                <ImageUpload :value="form.fPictureUrl" :limit="1" :isShowTip="false"
                                    @input="uploadFiles($event)" :disabled="form.check==1">
                                </ImageUpload>
                                <span style="color: #2561EF;cursor: pointer;" @click="openDraw">设置检测区域</span>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="form.fTestProject == 0">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item prop="fDriverWaitTime" label="驱动板等待时间（秒）">
                                <div @click="openWait()" class="el-input-div">{{
            form.wfDriverWait ? form.wfDriverWait.fDriverWaitTime : '请选择驱动板等待时间' }}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="form.fTestProject == 1">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item prop="productName" label="测试流程配置">
                                <div style="display: flex;">
                                    <div @click="openPlan()" class="el-input-div" v-if="form.fIsPlan == 0">{{
            form.wfPlan ? form.wfPlan.fPlanName : '请选择模板' }}</div>
                                    <el-checkbox label="是否手动填写" v-model="form.fIsPlan" :true-label="1" :false-label="0" @change="changePlan($event)"
                                        style="margin-left: 6px;"  :disabled="form.check==1"></el-checkbox>
                                </div>
                            </el-form-item>
                            <div></div>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="form.fTestProject == 1">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-light" v-if="form.fIsPlan == 0">
                            <el-table :data="form.wfPlan ? form.wfPlan.wfPlanDetailList : wfPlanDetailList"
                                style="width: 100%" height="250">
                                <el-table-column label="序号" type="index" width="120" align="center" />
                                <el-table-column label="驱动板等待时间（秒）" width="200" align="center">
                                    <template slot-scope="scope">
                                        <div>{{ scope.row.wfDriverWait ? scope.row.wfDriverWait.fDriverWaitTime : ''
                                            }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="刷新图片" width="150" align="center">
                                    <template slot-scope="scope">
                                        <el-link :href="scope.row.fPictureUrl?scope.row.fPictureUrl:''" :underline="false" target="_blank">
                                            <span class="el-icon-document"> {{ scope.row.fPictureUrl ? getFileName(scope.row.fPictureUrl) : ''  }} </span>
                                        </el-link>
                                        <!-- <img :src="scope.row.fPictureUrl ? scope.row.fPictureUrl : ''"
                                            @click="dialogImageUrl = scope.row.fProductUrl; dialogVisible = true;"> -->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="grid-content bg-purple-light" v-if="form.fIsPlan == 1">
                            <el-table :data="form.wfTaskCustomDetailList" style="width: 100%" height="250">
                                <el-table-column label="序号" type="index" width="120" align="center" />
                                <el-table-column label="驱动板等待时间（秒）" width="200" align="center">
                                    <template slot-scope="scope">
                                        <div @click="openWait(scope.$index)" class="el-input-div">
                                            {{ scope.row.wfDriverWait ? scope.row.wfDriverWait.fDriverWaitTime :
            '请选择驱动板等待时间' }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="刷新图片" width="150" align="center">
                                    <template slot-scope="scope">
                                        <el-button v-if="!scope.row.fPictureUrl" @click="uploadFile(scope.$index)" size="mini"
                                            type="primary">选取文件</el-button>
                                        <div v-else>
                                            <el-link @click="uploadFile(scope.$index)" :underline="false" target="_blank">
                                                <span class="el-icon-document"> {{ scope.row.fPictureUrl ? getFileName(scope.row.fPictureUrl) : '' }} </span>
                                            </el-link>
                                            <a style="color: #2561EF;" target="_blank" :download="getFileName(scope.row.fPictureUrl)" :href="scope.row.fPictureUrl" :name="getFileName(scope.row.fPictureUrl)" >下载</a>
                                        </div>
                                    </template>
                                    <!-- <template slot-scope="scope">
                                        <FileUpload :value="scope.row.fPictureUrl" :limit="1" :isShowTip="false"
                                            @input="uploadFile($event, scope.$index)" :fileType="['bin']"></FileUpload>
                                    </template> -->
                                </el-table-column>
                                <el-table-column label="操作" align="center" min-width="260" class-name="small-padding fixed-width" v-if="form.check!=1">
                                    <template slot-scope="scope">
                                        <el-button
                                            v-if="scope.$index === form.wfTaskCustomDetailList.length - 1 && form.wfTaskCustomDetailList.length < 17"
                                            size="small" :disabled="form.check == 1" type="primary" icon="el-icon-edit"
                                            @click="handleUpdate">新增</el-button>
                                        <el-button v-if="form.wfTaskCustomDetailList.length < 17" size="small"
                                            type="success" :disabled="form.check == 1" icon="el-icon-document-copy"
                                            @click="handleCopy(scope.row)">复制</el-button>
                                        <el-button size="small" :disabled="form.check == 1" type="danger" v-if="scope.$index !== 0" icon="el-icon-delete"
                                            @click="handleDelete(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialoge6 = false">取 消</el-button>
                <el-button type="primary" @click="toSure"  v-if="form.check == 0">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
        </el-dialog>
        <Lab ref="lab" @sure="getLab"></Lab>
        <Wait ref="wait" @sure="getWait"></Wait>
        <Plan ref="plan" @sure="getPlan"></Plan>
        <draw ref="draw" @sure="getDraw"></draw>
        <el-dialog :visible.sync="showUploadImg" title="选择文件" width="70%">
            <uploadImg  @close="showUploadImg = false"  @sure="getImg"></uploadImg>
        </el-dialog>
    </div>
</template>

<script>
import Lab from './lab.vue'
import Wait from './wait.vue'
import Plan from './plan.vue'
import draw from './draw.vue'

export default {
    components: {
        Lab,
        Wait,
        Plan,
        draw
    },
    name: 'setting',
    data() {
        return {
            dialogVisible: false,
            dialoge6: false,
            form: {
                fDr: 0,
                fTestProject: 0,
                fIsPlan: 0,
                fIsShadow: '0',
                fShadowWordUrl: '',
                fIsCustom: '0',
                fDetectionName: '',
                fCustomShadowUrl: '',
                wfPlanDetailList: [],
                fClientPresetName: '',
                wfPlan: {
                    wfPlanDetailList: []
                },
                wfTaskCustomDetailList: [],
                bcmClientPreset: {
                    fClientPresetName: '请选择期待Lab值方案'
                },
                wfDriverWait: {
                    // fDriverWaitTime:'请选择驱动板等待时间'
                },
                fProductId: localStorage.getItem('productId')
            },
            testProject: [
                { name: '标准残影检测', value: 0 },
                { name: 'NA-B残影检测', value: 1 }
            ],
            queryParams: {
                fMinute: '',
                fDriverWaitTime: '',
                fPictureUrl: ''
            },
            wfPlanDetailList: [],
            dialogImageUrl: '',
            waitIndex: 0,
            imgIndex:0,
            showUploadImg:false
        }
    },
    methods: {
        getDraw(){
            let arrList = this.$refs.draw.markList
            arrList.forEach(function (item) {
                item.x = Math.round(item.x*3.34);
                item.y = Math.round(item.y*3.34);
                item.w = Math.round(item.w*3.34);
                item.h = Math.round(item.h*3.34);
            });
            console.log(this.$refs.draw.markList)
            console.log(arrList)
            this.form.fPictureSite = arrList
        },
        openDraw(){
            if(this.form.check==1)return
            this.$refs.draw.open()
        },
        getFileName(name) {
            // 如果是url那么取最后的名字 如果不是直接返回
            if (name.lastIndexOf("/") > -1) {
                return name.slice(name.lastIndexOf("/") + 1);
            } else {
                return name;
            }
        },
        changePlan(e) {
            console.log(e)
            this.form.wfPlan.wfPlanDetailList = []
            this.form.wfTaskCustomDetailList = [{
                fMinute: '',
                fDriverWaitTime: '',
                fPictureUrl: ''
            }]
            this.form.wfPlan.fPlanName = ''
            this.form.fPlanName = ''
            this.form.fPlanId = ''
        },
        getLab(e) {
            console.log(e)
            this.form.bcmClientPreset = {}
            this.$set(this.form.bcmClientPreset, 'fClientPresetId', e.fId);
            this.$set(this.form.bcmClientPreset, 'fClientPresetName', e.fClientPresetName);
            this.$set(this.form, 'fClientPresetId', e.fId);
            this.$set(this.form, 'fClientPresetName', e.fClientPresetName);
        },
        getWait(e) {
            console.log(this.form.fTestProject, this.form.fIsPlan)
            if (this.form.fTestProject == 0) {
                this.$set(this.form, 'fDriverWaitId', e.fId);
                this.$set(this.form, 'fDriverWaitTime', e.fDriverWaitTime);
                this.form.wfDriverWait = {}
                this.$set(this.form.wfDriverWait, 'fDriverWaitId', e.fId);
                this.$set(this.form.wfDriverWait, 'fDriverWaitTime', e.fDriverWaitTime);
            } else if (this.form.fTestProject == 1 && this.form.fIsPlan == 1) {
                this.form.wfTaskCustomDetailList[this.waitIndex].wfDriverWait = {}
                this.form.wfTaskCustomDetailList[this.waitIndex].wfDriverWait.fDriverWaitTime = e.fDriverWaitTime
                this.$set(this.form.wfTaskCustomDetailList, this.waitIndex, { ...this.form.wfTaskCustomDetailList[this.waitIndex], fMinute: e.fId });
                this.$set(this.form.wfTaskCustomDetailList, this.waitIndex, { ...this.form.wfTaskCustomDetailList[this.waitIndex], fDriverWaitTime: e.fDriverWaitTime });
            }
        },
        getPlan(e) {
            this.form.wfPlan = {}
            this.form.wfPlan.fPlanName = e.fPlanName
            this.form.wfPlan.fPlanId = e.fId
            this.$set(this.form, 'fPlanName', e.fPlanName);
            this.$set(this.form, 'fPlanId', e.fId);
            this.form.wfPlan.wfPlanDetailList = e.wfPlanDetailList;
        },
        openLab() {
            if(this.form.check==1)return
            this.$refs.lab.where.fProductId =  this.form.fProductId
            this.$refs.lab.open()
        },
        openWait(index) {
            if(this.form.check==1)return
            if (index) {
                this.waitIndex = index
            }
            this.$refs.wait.where.fProductId =  this.form.fProductId
            this.$refs.wait.open()
        },
        openPlan() {
            if(this.form.check==1)return
            this.$refs.plan.where.fProductId =  this.form.fProductId
            this.$refs.plan.open()
        },
        open() {
            this.dialoge6 = true
            // if(this.form.wfTaskCustomDetailList.length===0){
            //     this.form.wfTaskCustomDetailList.push({ ...this.queryParams })
            // }
            console.log(this.form.wfTaskCustomDetailList)
        },
        getImg(e) {
            console.log(e)
            this.showUploadImg = false
            if (this.form.fTestProject == 1 && this.form.fIsPlan == 1) {
                this.$set(this.form.wfTaskCustomDetailList, this.imgIndex, { ...this.form.wfTaskCustomDetailList[this.imgIndex], fPictureUrl: e.fPictureUrl });
                this.$set(this.form.wfTaskCustomDetailList, this.imgIndex, { ...this.form.wfTaskCustomDetailList[this.imgIndex], fPictureId: e.fId });
            }else{
                this.form.wfPlan.wfPlanDetailList[this.imgIndex].fPictureUrl = e.fPictureUrl
                this.form.wfPlan.wfPlanDetailList[this.imgIndex].fPictureId = e.fId
            }
        },
        handleDeleteFile(index){
            if (this.form.fTestProject == 1 && this.form.fIsPlan == 1) {
                this.$set(this.form.wfTaskCustomDetailList, index, { ...this.form.wfTaskCustomDetailList[index], fPictureUrl: '' });
                this.$set(this.form.wfTaskCustomDetailList, index, { ...this.form.wfTaskCustomDetailList[index], fPictureId: '' });
            }else{
                this.form.wfPlan.wfPlanDetailList[index].fPictureUrl = ''
                this.form.wfPlan.wfPlanDetailList[index].fPictureId = ''
            }
        },
        uploadFile(index) {
            this.imgIndex = index;
            this.showUploadImg = true
        },
        uploadFiles(e) {
            console.log(e)
            this.form.fPictureUrl = e
            this.$refs.draw.pictureUrl = e
        },
        handleUpdate() {
            this.form.wfTaskCustomDetailList.push({ ...this.queryParams })
        },
        handleCopy(row) {
            // let arr = row
            this.form.wfTaskCustomDetailList.push({ ...row })
        },
        handleDelete(index) {
            this.form.wfTaskCustomDetailList.splice(index, 1)
        },
        toSure() {
            // if(!this.form.fTaskName){
            //     this.$message({
            //         message: '请输入任务名称',
            //         type: 'warning'
            //     })
            //     return
            // }
            if (!this.form.fClientPresetId) {
                this.$message({
                    message: '请选择期待LAB值',
                    type: 'warning'
                })
                return
            }
            // if(this.form.wfOrderTaskEntryList.some(item=>!item.fTaskName)){
            //     this.$message({
            //         message: '请输入子任务名称',
            //         type: 'warning'
            //     })
            //     return
            // }
            this.dialoge6 = false
            this.$emit("sure", this.form)
            this.form = {
                fDr: 0,
                fTestProject: 0,
                fIsPlan: 0,
                fIsShadow: '0',
                fShadowWordUrl: '',
                fIsCustom: '0',
                fDetectionName: '',
                fCustomShadowUrl: '',
                wfPlanDetailList: [],
                fClientPresetName: '',
                wfPlan: {
                    wfPlanDetailList: []
                },
                wfTaskCustomDetailList: [],
                bcmClientPreset: {
                    fClientPresetName: '请选择期待Lab值方案'
                },
                wfDriverWait: {
                    // fDriverWaitTime:'请选择驱动板等待时间'
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
.el-input-div {
    width: 180px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    line-height: 36px;
    cursor: pointer;
}
</style>